<!--
 * @Descripttion: 生成二维码组件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年12月20日14:22:20
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<img ref="img" />
</template>

<script>
	import QRcode from 'qrcodejs2-fix'

	export default {
		props: {
			text: { type: String, required: true, default: '' },
			size: { type: Number, default: 100 },
			logo: { type: String, default: '' },
			logoSize: { type: Number, default: 30 },
			logoPadding: { type: Number, default: 5 },
			colorDark: { type: String, default: '#000000' },
			colorLight: { type: String, default: '#ffffff' },
			correctLevel: { type: Number, default: 2 }
		},
		data() {
			return {
				qrcode: null
			}
		},
		watch: {
			text() {
				this.draw()
			}
		},
		mounted() {
			this.draw()
		},
		methods: {
			//创建原始二维码DOM
			async create() {
				return new Promise((resolve) => {
					var element = document.createElement('div')
					new QRcode(element, {
						text: this.text,
						width: this.size,
						height: this.size,
						colorDark: this.colorDark,
						colorLight: this.colorLight,
						correctLevel: this.correctLevel
					})
					if (element.getElementsByTagName('canvas')[0]) {
						this.qrcode = element
						resolve()
					}
				})
			},
			//绘制LOGO
			async drawLogo() {
				return new Promise((resolve) => {
					var logo = new Image()
					logo.src = this.logo
					const logoPos = (this.size - this.logoSize) / 2
					const rectSize = this.logoSize + this.logoPadding
					const rectPos = (this.size - rectSize) / 2
					var ctx = this.qrcode.getElementsByTagName('canvas')[0].getContext('2d')
					logo.onload = () => {
						ctx.fillRect(rectPos, rectPos, rectSize, rectSize)
						ctx.drawImage(logo, logoPos, logoPos, this.logoSize, this.logoSize)
						resolve()
					}
				})
			},
			async draw() {
				await this.create()
				if (this.logo) {
					await this.drawLogo()
				}
				this.$refs.img.src = this.qrcode.getElementsByTagName('canvas')[0].toDataURL('image/png')
			}
		}
	}
</script>

<style></style>
